<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>值班表</title>
    <link rel="stylesheet" href="../css/H-ui.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <style>
       /* input
        {
            border-top:0px ;
            border-bottom:0px ;
            border-left:0px ;
            border-right:0px ;
        }*/
    </style>
</head>
<body ng-app="dutyScheduleApp" ng-controller="dutyScheduleCtrl">
<div id="divId1" style="height: 60px;background-color: #F8F8F8;width: 100%;">
    <a href='../html/dutyScheduleDay.html'><img id="u750"  style="float: right;vertical-align: middle;margin-right: 10px" src="../images/u750.png"></a>
</div>
<div id="divId2" style="height: 46px;width: 100%;margin-top: 10px;text-align: center">
    <img ng-click="preMonth()" style="float: left;vertical-align: middle;margin-left: 10px;width: 22px;height: 25px;cursor:pointer" src="../images/arrow-left.png">
    <input ng-click="updateTime()" id="bnt1" style="border:2px solid darkgray ;float: left;margin-left: 10px; background-color:white;width: 50px;height: 25px" name="bnt1" type="button" value="今天" />
    <input type="text" style="width: 100px;font-size: larger;cursor:pointer" class="form_datetime_2 input-text radius size-S borderNone text-c"  id="month_time" value=""/>
    <img style="vertical-align: middle;"  src="../images/riqi.png">

    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
    <!--<span style="color:black;font-weight:bold;font-size:26px">December 2016</span>-->
    <img ng-click="nextMonth()" style="float: right;vertical-align: middle;margin-right: 10px;width: 22px;height: 25px;cursor:pointer" src="../images/arrow-right.png">
</div>
<div style="width: 100%;" >
    <div style="width: 100%;height: 60px;float: left; margin:0; padding:0;border-bottom: 0" class="table table-bordered">
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周日</div>
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周一</div>
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周二</div>
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周三</div>
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周四</div>
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周五</div>
        <div style="float: left;width: 14.28%;height: 100%;text-align: center;vertical-align: middle" class="table table-bordered">周六</div>
    </div>
    <div style="width: 100%;height: 540px;float: left; margin:0; padding:0;border-top: 0;" class="table table-bordered">
        <div style=" cursor:pointer;margin:0; padding:0;float: left;width: 14.28%;height: 15%;text-align: center;vertical-align: middle"
             class="table table-bordered"
             ng-repeat="item in dataList" ng-click="tiaozhaun(item)">
            <span style="float: right" ng-bind="item.checkDate"></span>
            <div style="margin:0; padding:0;margin-top:20px;margin-left:10px;margin-right:10px;width:85%;height:75%;background-color: deepskyblue">
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span style="color: white" ng-bind="item.normalNumber"></span><span style="color: white">个正常班</span>
                  <br>
                  &nbsp;<span style="color: white" ng-bind="item.earlyNumber"></span><span style="color: white">个早班</span>
                  <br>
                  <span style="color: white" ng-bind="item.eveningNumber"></span><span style="color: white">个晚班</span>
            </div>
        </div>

    </div>
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-datetimepicker.min.js"></script>
<script src="../js/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    //图片垂直居中
    window.onload=function(){
        var img = document.getElementById("u750");
        var div = document.getElementById("divId1");
        var marginTop = div.offsetHeight - img.height;
        img.style.marginTop = (marginTop/2) + "px";
    };
    //angular post请求头
    var transform = function(data) {
		return $.param(data);
	}, postCfg = {
		headers : {
			'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
		},
		transformRequest : transform
	};
    var app = angular.module('dutyScheduleApp',[])
         app.controller('dutyScheduleCtrl',function ($scope, $http) {
        	 //获取当前时间
             $scope.updateTime = function () {
                 var date = new Date();
                 var year = date.getFullYear();
                 var month = date.getMonth()+1;
                 var day = date.getDate();
                 var currentTime = year+"-"+month;
                 var postDate = year+"-"+month+"-"+"01";
                 $("#month_time").val(currentTime);
                 //获取列表集合
                 var data ={'checkDate':postDate};
                 $http.post('/watchArrangements/findByMonth',data,postCfg)
                      .success(function(data){
                    	  if(data.errorMessage == null){
                    		  $scope.dataList = data;
                    	  }
                      })
                 return currentTime;
             };
             $scope.updateTime();
             //页面跳转
             $scope.tiaozhaun = function (item) {
                 window.location.href='dutyScheduleDay.html?data='+item.checkDate;
             };
             //改变日期获取列表的请求
             $scope.postDataList = function(date){
            	 var data ={'checkDate':date};
                 $http.post('/watchArrangements/findByMonth',data,postCfg)
                      .success(function(data){
                    	  if(data.errorMessage == null){
                    		  $scope.dataList = data;
                    	  }
                      });
             };
             //格式化时间
             Date.prototype.format = function (format) { 
				var o = { 
				"M+": this.getMonth() + 1, //month 
				"d+": this.getDate(), //day 
				"h+": this.getHours(), //hour 
				"m+": this.getMinutes(), //minute 
				"s+": this.getSeconds(), //second 
				"q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
				"S": this.getMilliseconds() //millisecond 
				} 
				if (/(y+)/.test(format)) format = format.replace(RegExp.$1, 
				(this.getFullYear() + "").substr(4 - RegExp.$1.length)); 
				for (var k in o) if (new RegExp("(" + k + ")").test(format)) 
				format = format.replace(RegExp.$1, 
				RegExp.$1.length == 1 ? o[k] : 
				("00" + o[k]).substr(("" + o[k]).length)); 
				return format; 
			 } 
             //日期控件选择
             $(".form_datetime_2").datetimepicker({
                 language:  'zh-CN',
                 format: 'yyyy-mm',
                 autoclose: true,
                 todayBtn: false,
                 startView: 'year',
                 minView:'year',
                 maxView:'decade',
                 bootcssVer:3
             }).on('changeDate', function(ev){
                 var val = ev.date.valueOf();
                 var unixTimestamp = new Date( val ) ;
                 var yy = unixTimestamp.getFullYear();
                 var mm = unixTimestamp.getUTCMonth();
                 var dd = unixTimestamp.getUTCDate();
                 var commonTime = unixTimestamp.format("yyyy-MM-dd")//2013-09-04
                 $scope.postDataList(commonTime);
             });
             //上个月
             $scope.preMonth = function() {
                 var date = document.getElementById("month_time").value;
                 var year = date.substring(0,4);
                 var month = date.substring(5,7);
                 if(month == "01"){
                     year = parseInt(year)-1;
                     month = "12";
                     var nextDate = year+"-"+month;
                     var data = year+"-"+month+"-"+"01";
                     $("#month_time").val(nextDate);
                     $scope.postDataList(data);
                 }else{
                     month = parseInt(month)-1;
                     if(month<10){
                         month = "0"+month;
                     }
                     var nextDate = year+"-"+month;
                     var data = year+"-"+month+"-"+"01";
                     $("#month_time").val(nextDate);
                     $scope.postDataList(data);
                 }
             };
             //下个月
             $scope.nextMonth = function() {
                 var date = document.getElementById("month_time").value;
                 var year = date.substring(0,4);
                 var month = date.substring(5,7);
                 if(month == "12"){
                     year = parseInt(year)+1;
                     month = "01";
                     var nextDate = year+"-"+month;
                     var data = year+"-"+month+"-"+"01";
                     $("#month_time").val(nextDate);
                     $scope.postDataList(data);
                 }else{
                     month = parseInt(month)+1;
                     if(month<10){
                         month = "0"+month;
                     }
                     var nextDate = year+"-"+month;
                     var data = year+"-"+month+"-"+"01";
                     $("#month_time").val(nextDate);
                     $scope.postDataList(data);
                 }

             };
         });
</script>
</body>
</html>